<template>
	<view class="search">
		<view class="search-container">
			<view class="search-input">
				<text class="iconfont icon-sousuo"></text>
				<input
					v-model="keywods"
					placeholder="搜索商品名称"
					@confirm="onSearch"/>
			</view>
			<view class="show-mode" @click="onSwitchShowMode">
				<text class="iconfont" :class="[`icon-${showMode[curShowModeIdx].val}`]"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywods: '',
				showMode: [
					{
						val: 'pailie'
					}, 
					{
						val: 'tupianpailie'
					}
				],
				curShowModeIdx: 0
			}
		},
		created () {
			this.$emit('switch-mode', this.showMode[this.curShowModeIdx].val)
		},
		methods: {
			onSearch (event) {
				this.$emit('search', event.detail.value)
			},
			onSwitchShowMode () {
				this.curShowModeIdx = (this.curShowModeIdx + 1) % this.showMode.length
				this.$emit('switch-mode', this.showMode[this.curShowModeIdx].val)
			}
		}
	}
</script>

<style lang="scss" scoped>
.search {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 86rpx;
	&-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 22rpx;
		height: 100%;
		background-color: #e93323;
		
		.search-input {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 640rpx;
			height: 60rpx;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.icon-sousuo {
				font-size: 34rpx;
				color: #555;
			}
			input {
				width: 548rpx;
				height: 100%;
				font-size: 26rpx;
			}
		}
		
		.show-mode {
			width: 62rpx;
			height: 86rpx;
			color: #fff;
			line-height: 86rpx;
			.iconfont {
				font-size: 40rpx;
			}
		}
	}
}
</style>
